<template>
	<view class="order-content" :style="{
		'padding-top':uTabOffsetTop+'px'
	}">
		<view class="tabs" :style="{
			'top':uTabOffsetTop+'px'
		}">
			<u-tabs active-color="#333" font-size="28" :bar-style="{
			'background': 'linear-gradient(-90deg, #FD3129, #FF4D46)',
			'border-radius': '3rpx'
		}"
			 :list="tabs" :is-scroll="false" :current="current" @change="$event=> current = $event"></u-tabs>
		</view>

		<view class="list">
			<view class="item" v-for="(e,i) in list" :key="i">
				<view class="upper">
					<view>
						<u-icon :name="appletImgUrl+'oll-order-item-icon.png'" width="38" height="38"></u-icon>
						<text class="name">{{e.gasName}}</text>
					</view>
					<view>{{e.orderStatusName}}</view>
				</view>
				<view class="lower">
					<view>{{e.litre}}升 {{e.oilNo}} {{e.gasName}}</view>
					<view>
						<view>{{e.orderTime}}</view>
						<view><text>￥</text>{{e.amountPay}}</view>
					</view>
					<view style="justify-content: flex-end;">
						<view class="btn">再次前往</view>
						<view class="btn">再次前往</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				current: 0,
				status:'loading',
				list: [],
				uTabOffsetTop: 44 + uni.getSystemInfoSync().statusBarHeight,
				tabs: [{
					name: '全部'
				}, {
					name: '已支付'
				}, {
					name: '退款'
				}],
			}
		},
		mounted() {
			this.pageNo = 1
			this.getOrderList(res => {
				this.list = res
				this.status = res.length < 10 ? 'nomore' : 'loadmore'
			})
		},
		methods: {
			getOrderList(callback) {
				this.$u.post('gasoilstation/getUserGasOilOrderList', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					callback(res.list)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		.item {
			box-shadow: 0px 0 12px 1px rgba(203, 203, 202, 0.2);
			background-color: #fff;
			margin: 0 30rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			padding-bottom: 25rpx;

			.lower {
				padding: 0 30rpx;

				>view {
					display: flex;

					&:last-child {
						margin-top: 50rpx;

						.btn {
							line-height: 48rpx;
							font-size: 24rpx;
							width: 140rpx;
							border: 1rpx solid #333333;
							border-radius: 10rpx;
							text-align: center;
							margin-left: 30rpx;
						}
					}

					&:nth-child(2) {
						margin-top: 10rpx;

						view {
							&:first-child {
								color: #aaa;
							}

							&:last-child {
								color: #FF4D46;
								font-size: 36rpx;
								font-weight: bold;

								text {
									font-size: 20rpx;
									font-weight: normal;
								}
							}
						}
					}

					justify-content: space-between;
				}
			}

			.upper {
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #F7F7F7;

				>view {
					&:last-child {
						color: #FF4D46;
					}

					&:first-child {
						display: flex;
						align-items: center;

						.name {
							margin-left: 15rpx;
						}
					}
				}
			}
		}
	}

	.tabs {
		position: sticky;
		left: 0;
		z-index: 10;
	}
</style>
